সিএসএস(৩) কালার

সিএসএস(৩) আসার পূর্বে সিএসএসে শুধুমাত্র কালারের নাম, হেক্সাডেসিমাল এবং RGB ভ্যালুর কালার সাপোর্ট করত।

সিএসএস(৩) তে আরও কিছু কালার-ভ্যালু যোগ হয়েছে। যথাঃ

• RGBA কালার
• HSL কালার
• HSLA কালার
• opacity

RGBA কালার

RGBA কালার ভ্যালু হচ্ছে alpha channel এর মাধ্যমে RGB কালারের সম্প্রসারিত কালার-ভ্যালু যা কালারের অস্পষ্টতা(opacity) নির্দেশ করে।

RGBA কালার-ভ্যালুর সিনটেক্স

rgba(red, green, blue, alpha)

এখানে প্রথম তিনটি মান হলো RGB ভ্যালু অর্থাৎ red, green এবং blue। আর চতুর্থ মানটি হলো আলফা মান যা কালারের অপাসিটি নির্দেশ করে। আলফা প্যারামিটারটির সর্বনিম্ন মান ০.০(সম্পূর্ণ স্বচ্ছ) এবং সর্বোচ্চ মান ১.০(সম্পূর্ণ অস্বচ্ছ)।

নিম্নে RGBA কালার এর ব্যবহার দেখানো হলোঃ

kt_satt_skill_example_id=1340

HSL কালার

HSL কালার-ভ্যালুর সিনটেক্স:

hsl(hue, saturation, lightness)

HSL কালার তিনটি অংশে বিভিক্ত। যথাঃ Hue, Saturation এবং Lightness।

প্রথম অংশ Hue। যা কালেরর মান নির্ধারণ করে। এটি ডিগ্রী এককে ভ্যালু গ্রহণ করে। যেখানে ০(শূন্য) হলো সর্বনিম্ন ডিগ্রী এবং ৩৬০ সর্বোচ্চ ডিগ্রী। এখানে ০ এবং ৩৬০ ডিগ্রী হচ্ছে লাল কালার। ১২০ ডিগ্রী হচ্ছে সবুজ কালার আর ২৪০ ডিগ্রী হচ্ছে নীল কালার।

দ্বিতীয় অংশ Saturation যা কালারের পূর্ণতা প্রদান করে। এটি শতকরা এককে ভ্যালু গ্রহণ করে। যেখানে ০% হলো সর্বনিম্ন এবং ১০০% সর্বোচ্চ মান।

তৃতীয় অংশ Lightness যা কালারের উজ্জ্বলতা নির্দেশ করে। এটি শতকরা এককে মান/ভ্যালু গ্রহণ করে। যেখানে ০% হলো সর্বনিম্ন এবং ১০০% সর্বোচ্চ মান। সুতরাং এখানে ০% হচ্ছে কালো এবং ১০০% হচ্ছে সাদা বা উজ্জ্বল।

নিম্নে HSL কালার এর ব্যবহার দেখানো হলোঃ

kt_satt_skill_example_id=1436

HSLA কালার

HSLA কালার-ভ্যালু হচ্ছে alpha channel এর মাধ্যমে HSL কালারের সম্প্রসারিত কালার-ভ্যালু যা কালারের অস্পষ্টতা(opacity) নির্দেশ করে।

HSLA কালার-ভ্যালুর সিন

hsla(hue, saturation, lightness, alpha)

kt_satt_skill_example_id=1433

Opacity(অস্বচ্ছতা)

সিএসএস(৩) opacity প্রোপার্টির মাধ্যমে একটি এলিমেন্টকে স্বচ্ছ/অস্বচ্ছ করা যায়।

opacity(অস্বচ্ছতা) প্রোপার্টির সর্বনিম্ন মান ০.০(সম্পূর্ণ স্বচ্ছ) এবং সর্বোচ্চ মান ১.০(সম্পূর্ণ অস্বচ্ছ) এর মধ্যে হতে হবে।

নিম্নে Opacity প্রোপার্টির ব্যবহার দেখানো হলোঃ

উপরের কালারগুলো লক্ষ্য করলে দেখবেন যে, কালারের সাথে লেখাগুলোও অস্পষ্ট হয়ে গেছে। অর্থাৎ আমরা opacity ব্যবহার করে কালারের সাথে লেখাও অস্বচ্ছ বা ট্রান্সপারেন্ট করতে পারি।

kt_satt_skill_example_id=1428

ব্রাউজার সাপোর্ট